<template>
  <div>
    <el-container>
      <!-- 筛选条件-->
      <el-header>
        <el-row :gutter="20">

          <el-col :span="6">
            <el-input size="medium" placeholder="请输入角色名称" prefix-icon="el-icon-search" style="width: 70%;border-radius: 30px" v-model="filter.name" clearable></el-input>
          </el-col>

          <el-col :span="6">
              <el-date-picker v-model="filter.startTime" type="date" placeholder="开始日期"></el-date-picker>
          </el-col>

          <el-col :span="1"> - </el-col>

          <el-col :span="6">
              <el-date-picker v-model="filter.endTime" type="date" placeholder="结束日期"></el-date-picker>
          </el-col>
          <el-button type="primary" @click="getData()" round>查询</el-button>
        </el-row>
      </el-header>
      <!-- 主表-->
      <el-main>
        <el-table :data=tableData style="width: 100%">
          <el-table-column label="角色主键" prop="id"></el-table-column>
          <el-table-column label="角色名称" prop="name"></el-table-column>
          <el-table-column label="角色描述" prop="description"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success"  @click="handleAdd(scope.$index, scope.row)">新增权限</el-button>
              <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 分页工具-->
      <el-footer>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3,5,7]"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Total">
        </el-pagination>
      </el-footer>
    </el-container>

    <!-- 添加权限-->
    <el-dialog title="权限表" :visible.sync="dialogTableVisible">
      <auth :roleId="roleId" ></auth>
    </el-dialog>

    <!-- 查询权限表-->

  </div>
</template>

<script>
import {
  list,
  save,
  getEntity
} from '../../../api/Role'
import util from '@/util/table.js'
import auth from '@/components/table/auth/AuthForRole'

export default {
  data () {
    return {
      author: '',
      tableData: '',
      currentPage: 1,
      PageSize: 5,
      Total: 10,
      currentTotal: 0,
      dialogTableVisible: false,
      filter: {
        name: '',
        startTime: '',
        endTime: ''
      },
      textMap: {
        update: '编辑',
        create: '添加'
      },
      dialogStatus: '',
      form: {
        id: '',
        name: '',
        createTime: '',
        description: ''
      },
      roleId: ''
    }
  },
  methods: {
    handleAdd (index, row) {
      this.dialogTableVisible = true
      this.roleId = row.id
    },
    handleEdit (index, row) {
      const para = {
        id: row.id
      }
      getEntity(para).then(res => {
        this.form = res.data
      })
    },
    getData () {
      this.filter.startTime =
        !this.filter.startTime || this.filter.startTime === ''
          ? null
          : util.formatDate.format(new Date(this.filter.startTime), 'yyyy-MM-dd')

      this.filter.endTime =
        !this.filter.endTime || this.filter.endTime === ''
          ? null
          : util.formatDate.format(new Date(this.filter.endTime), 'yyyy-MM-dd')

      const para = {
        filter: this.filter,
        currentPage: this.currentPage,
        pageSize: this.PageSize
      }

      list(para).then(res => {
        if (res.data.successFlg === true) {
          this.tableData = res.data.data
          this.currentTotal = res.data.currentSize
          this.Total = res.data.total
        }
      })
    },
    handleSizeChange (val) {
      this.PageSize = `${val}`
      this.getData()
    },
    handleCurrentChange (val) {
      this.currentPage = `${val}`
      this.getData()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    saveData () {
      this.form.createTime =
        !this.form.createTime || this.form.createTime === ''
          ? null
          : util.formatDate.format(new Date(this.form.createTime), 'yyyy-MM-dd')

      const para = {
        datajson: this.form
      }

      save(para).then(res => {
        this.getData()
        if (res.data.successFlg) {
          this.$message({
            message: '操作成功！',
            type: 'success',
            duration: 3 * 1000
          })
        } else {
          this.$message({
            message: '操作失败！',
            type: 'error',
            duration: 3 * 1000
          })
        }
      })
    },
    concel () {
      this.clean()
    },
    clean () {
      this.form.id = ''
      this.form.name = ''
      this.form.description = ''
      this.form.createTime = ''
    }
  },
  mounted () {
    // 实现自动加载
    this.getData()
  },
  components: {
    auth
  }
}
</script>

<style scoped>
.el-header {
  background-color: rgba(169, 235, 36, 0.25);
}
</style>
